<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是11月21日<span>星期六</span></p>
    <p class="title">下课倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">11:40:00下课</p>
  </div>
  <script>
    // 做倒计时要有两个时间 未来时间A 现在时间B A-B就是时间差 ，毫秒的差，转成时分秒


    // 随机颜色函数
    // 1. 自定义一个随机颜色函数 #00FF00 rgb(255,255,255)
    // a.style.color = '#FFFF00'  // 三原色 Red Green Blue   0-F 的6位数
    // a.style.color = 'rgb(255,0,0)'  // 三原色 Red Green Blue   rgb(255,0,0)  0-255
    const div = document.querySelector('.countdown')
    // div.style.backgroundColor = 'rgb(0,0,255)' 
    // div.style.backgroundColor = '#FF0000'

    function randomColor(flag = true) {
      if (flag) {
        let str = '#'  // 每次随机得到的数值拼到str后面
        // 定义数组，把可选值写到数组，再去用随机的下标取6次数组的值 
        const colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // F #F 0 #F0
        for (let i = 0; i < 6; i++) {  // i 这边是次数 6次
          const n = Math.floor(Math.random() * colors.length);  // 随机得到一个数组的下标
          str = str + colors[n]

        }
        // console.log(str);
        return str;
      } else {
        const r = Math.floor(Math.random() * 256)
        const g = Math.floor(Math.random() * 256)
        const b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }

    }

    console.log(randomColor());





 const weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    document.querySelector('.next span').innerHTML = weekdays[new Date().getDay()]

    // 函数封装 getCountTime
  function getTime() {
    div.style.backgroundColor = randomColor(false)
    //1.得到当前的时间戳
    const now = +new Date()
    //2.得到将来的时间戳
    const last = +new Date('2024-11-21 14:40:00')
    //3.得到剩余的时间戳count 记得转换为秒数
    const count = (last-now) /1000

    console.log(count);
    //4.转换为时分秒
    //计算小时
    const h = parseInt(count / 60 / 60) < 10 ? '0' + parseInt(count / 60 / 60) : parseInt(count / 60 / 60) //parseInt() 相当于Math.floor()
    console.log(h + '小时');
    //计算分数
    const m = parseInt(count / 60 % 60) < 10 ? '0' + parseInt(count / 60 % 60) : parseInt(count / 60 % 60)
    console.log(m + '分');
    //计算秒数
    const s = parseInt(count % 60) < 10 ? '0' + parseInt(count % 60) : parseInt(count % 60)
    console.log(s + '秒');
    //5.把时分秒写到对应的盒子里面
    document.querySelector('#hour').innerHTML = h
    document.querySelector('#minutes').innerHTML = m
    document.querySelector('#scond').innerHTML = s
  }
    getTime()
    setInterval(getTime,1000)

  </script>
</body>

</html>